<template>
    <div class="comment-box">
        <h4>发表评论</h4>

        <hr>
        <!-- 输入内容文本域 -->
        <textarea v-model="msg" placeholder="请输入要BB的内容(最多BB的字数是120字)" maxlength="120"></textarea>
        <mt-button plain size="large" @click="postComment">发表评论</mt-button>

        <!-- 用户评论 -->
        <div class="info-list">
            <h4>精选评论：</h4>
            <div class="info-item" v-for="(item,index) in commonInfo" :key = "item.id">
                <div class="info-title">
                    <span>第{{ index+1 }}楼&nbsp&nbsp</span>用户:{{item.user_name}}&nbsp&nbsp发表时间:{{item.add_time | dataFormat}}
                </div>
                <div class="info-content">
                    {{item.content === 'underfined' ? "此用户很懒，嘛都没说":item.content}}
                </div>
            </div>
        </div>

        <!-- 加载更多 -->
         <mt-button plain size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>
<script>
// 引入提示信息
import { Toast } from 'mint-ui';
export default {
    data(){
        return {
           pageIndex: 1,
           commonInfo: [],
           msg: "",
        };
    },
    created(){
        this.getComments();
    },
    methods: {
        getComments(){//获取用户评论列表
          this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageIndex).then(result => {
              if(result.body.status === 0){
                //   console.log(result.bodyText);
                //   接收数据成功是一个数组
                // this.commonInfo = result.body.message;点击加载更多需要拼接以前的旧数据
                this.commonInfo = this.commonInfo.concat(result.body.message);

              }else {
                  Toast("信息获取失败,请刷新~~~");
              }
          })
        },
        getMore(){
            // 点击加载更多触发的事件
           this.pageIndex++;
           this.getComments();
        },
        // 发表评论事件
        postComment(){
            if(this.msg === ""){
               return Toast("评论内容不能为空！");
            };
            // 把发表内容发送到后台/api/postcomment/:artid
            this.$http.post('api/postcomment/'+ this.id,{ content :this.msg.trim()})
            .then(result => {
                console.log(result);
                if(result.body.status === 0){
                    console.log(1)
                    var cmt = {
                         user_name: "匿名用户",
                         add_time: Date.now(),
                         content: this.msg.trim()
                     };
                     this.commonInfo.unshift(cmt);
                     this.msg = "";
                }
            })

        }
    },
    props:["id"],
}
</script>
<style lang="scss" scoped>
  .comment-box {
      .info-list {
          margin-top: 20px;
          h4 {
              font-weight: normal;
              color: skyblue;
          }
      } 
      .info-title {
          background-color: #ccc;
          span {
              color: red;
          }
      }
      .info-content {
          padding: 7px 0;
          background-color: skyblue;
      }
      textarea {
          margin: 0;
          padding: 5px 2px;
          height: 90px;
          margin: 10px 0;
      }
     .mint-button{
          color: red;
          margin-top: 10px;
          margin-bottom: 5px;
      }
  }
</style>
